<template>
  <div>
    <indexheade></indexheade>  
    <div class="w">
      <!-- 搜索 -->
      <el-input 
      placeholder="请输入内容" 
      class="input-with-select"
       v-model="quertInfo.query" 
       @change="search" 
       clearable
       @clear="search"
       >
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
      <el-button type="primary" @click="openUser">添加用户</el-button>
      <!-- 用户表格区域 -->
      <el-table  stripe border :data="userList" style="width: 100%"  >
        <el-table-column prop="id" label="#" width="60" type="index" >
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="100" >
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="mobile" label="电话">
        </el-table-column>
        <el-table-column prop="role_name" label="角色">
        </el-table-column>
        <!-- 状态开关 -->
        <el-table-column prop="mg_state" label="状态" width="80" >
          <!-- 使用插槽插入 -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
            </el-switch>
          </template> 
        </el-table-column>
        <el-table-column prop="" label="操作" width="200px">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button 
            type="primary" icon="el-icon-edit" size="mini" 
            @click="openUpadteUser(scope.row)"></el-button>
            <!-- 删除 -->
            <el-button 
            type="danger" 
            icon="el-icon-delete"  
            size="mini" 
            @click="deleteUser(scope.row)"
            ></el-button>
            <!-- 分配角色 -->
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" @click="openRole(scope.row)" icon="el-icon-star-off"  size="mini"></el-button>
          </el-tooltip>
          </template> 
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="quertInfo.pagenum"
          :page-sizes="[1, 2, 4, 6]"
          :page-size="quertInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- 添加用户 -->
        <addUser 
        :addUser="addUser" 
        :offUser="offUser" 
        :dialogVisible="dialogVisible" 
        :gethttp="gethttp">
        </addUser>
        <!-- 修改用户 -->
        <updateUser
        :offUser="offUser" 
        :updateDialogVisible="updateDialogVisible" 
        :gethttp="gethttp"
        :user="user"
        ></updateUser>
        <!-- 分配角色框 -->
        <assionRole
        :offf="offUser" 
        :user="user"
        :gethttp="gethttp"
        :dialogVisible="roleDialogVisible"
        />
    </div>
  </div>
</template>

<script>
import indexheade from '../components/indexheade.vue';
import addUser from '../components/user/addUser.vue';
import updateUser from '../components/user/updateUser.vue';
import assionRole from '../components/user/assionRole.vue';
export default {
  name:'users',
  data() {
    return {
      quertInfo:{
        query: '',
        // 当前的页数
        pagenum:1,
        //当前每页显示多少条数据
        pagesize:2,
      },
      //表格数据所在地
      userList:[],
      //总共有多少条数据
      total:100,
      //添加用户框打开和关闭
      dialogVisible: false,
      //修改用户框打开和关闭
      updateDialogVisible: false,
      // 分配角色框的打开与关闭
      roleDialogVisible:false,
      //当前行用户数据
      user:{}
    };
  },
  mounted(){
    //发送网络请求获取用户数据
    this.gethttp()
  },
  methods:{
    //发送网络请求获取用户数据函数
    gethttp(){
      this.$http({
      method:'GET',
      url:'users',
      //需要传递的参数
      params:this.quertInfo
      }).then(
      respose => {//正确请求时执行的代码
        // console.log(respose.data.data)
        this.userList = respose.data.data.users
        this.total = respose.data.data.total
      },
      error => {//错误时执行的代码
      },
      )
    },
    //修改用户状态值
    userStateChanged(row){
      // console.log(row);
      //发送网络请求
      this.$http.put(`users/${row.id}/state/${row.mg_state}`).then(
      respose => {//正确请求时执行的代码
        console.log(respose.data);
      },
      error => {//错误时执行的代码
        row.mg_state =  !row.mg_state
        console.log("更新失败了",error)
      },
      )
    },
    //当切换每页显示多少条时显示
    handleSizeChange(newvalue){
      console.log(newvalue)
      this.quertInfo.pagesize = newvalue
      this.gethttp()
    },
    //页码值切换时触发
    handleCurrentChange(newvalue){
      console.log(newvalue)
      this.quertInfo.pagenum = newvalue
      this.gethttp()
    },
    // 搜索功能实现
    search(){
      this.gethttp()
    },
    //添加用户方法
    addUser(a){
      console.log(a,this.total);
    },
    //打开添加用户框
    openUser(){
      this.dialogVisible = true

    },
    // 打开分配角色框
    openRole(row){
      this.roleDialogVisible = true
      // 给user赋值
      this.user = row
      // console.log(this.user);
    },
    //关闭添加用户框和修改用户框和分配角色框
    offUser(){
      this.dialogVisible = false
      this.updateDialogVisible = false
      this.roleDialogVisible = false
    },
    //打开修改用户框
    openUpadteUser(row){
      this.updateDialogVisible = true
      // console.log(row)
      this.user = row
    },
    //删除用户
    deleteUser(row){
      console.log(row);
      this.$http.delete(`users/${row.id}`).then(
      respose => {//正确请求时执行的代码
        if (respose.data.meta.status!=200) {//删除失败
            // console.log(respose.data.meta.status)
            this.$message({
            message: '删除失败,'+respose.data.meta.msg,
            type: 'error',
            showClose: true,
            duration:4000
            })
        }
        else{
          this.$message({
              message: '删除成功',
              type: 'success',
              duration:2000
          })
          this.gethttp()
        }
      },
      error => {//错误时执行的代码
        this.$message({
                        message: '添加失败'+ error.code,
                        type: 'error',
                        duration:2500
                    })
      },
      )
    }
  },
  components: {
    indexheade,
    addUser,
    updateUser,
    assionRole
  }
}
</script>

<style scoped>
.input-with-select {
  width: 350px;
}

.el-button {
  margin-left: 20px;
}
</style>